//创建一个当前要绘制的对象
let sketch = new ol.Feature()
//创建一个帮助提示框对象
let helpTooltipElement = null
//创建一个帮助提示信息对象
let helpTooltip = null
//创建一个测量提示框对象
let measureTooltipElement = null
//创建一个测量提示信息对象
let measureTooltip = null

//继续绘制多边形的提示信息
const continuePolygonMsg = 'Click to continue drawing the polygon'
//继续绘制线段的提示信息
const continueLineMsg = 'Click to continue drawing the line'

//初始化一个画笔
let draw = null
//监听画笔绘制几何的变化
let listener

function exit() {
  source.clear()
  map.removeInteraction(draw)
  //关闭测量值显示框
  $('div.tooltip').remove()
  //解绑鼠标移动事件
  map.un('pointermove', pointerMoveHandler)
  map.on('click', addPopup)
}

function meaStart(event) {
  //console.log(event.data)
  map.un('click', addPopup)
  //清除之前的画笔
  map.removeInteraction(draw)
  //创建画笔
  if (event.data == 'dis') {
    draw = createDraw(source, 'LineString', drawEnd, drawStart)
  } else if (event.data == 'area') {
    draw = createDraw(source, 'Polygon', drawEnd, drawStart)
  }
  //添加画笔
  map.addInteraction(draw)
  createMeasureTooltip() //创建测量工具提示框
  createHelpTooltip() //创建测量提示工具
}

//绑定交互绘制工具开始绘制的事件
function drawStart(evt) {
  map.on('pointermove', pointerMoveHandler)
  // set sketch
  sketch = evt.feature //绘制的要素
  /** @type {ol.Coordinate|undefined} */
  var tooltipCoord = evt.coordinate // 绘制的坐标
  //绑定change事件，根据绘制几何类型得到测量长度值或面积值，并将其设置到测量工具提示框中显示
  listener = sketch.getGeometry().on('change', function (evt) {
    const geom = evt.target //绘制几何要素
    let output
    if (geom instanceof ol.geom.Polygon) {
      output = formatArea(/** @type {ol.geom.Polygon} */ (geom)) //面积值
      tooltipCoord = geom.getInteriorPoint().getCoordinates() //坐标
    } else if (geom instanceof ol.geom.LineString) {
      output = formatLength(/** @type {ol.geom.LineString} */ (geom)) //长度值
      tooltipCoord = geom.getLastCoordinate() //坐标
    }
    measureTooltipElement.innerHTML = output //将测量值设置到测量工具提示框中显示
    measureTooltip.setPosition(tooltipCoord) //设置测量工具提示框的显示位置
  })
}
//绑定交互绘制工具结束绘制的事件
function drawEnd(evt) {
  //console.log(evt)
  measureTooltipElement.className = 'tooltip tooltip-static' //设置测量提示框的样式
  measureTooltip.setOffset([0, -7])
  // unset sketch
  sketch = null //置空当前绘制的要素对象
  // unset tooltip so that a new one can be created
  measureTooltipElement = null //置空测量工具提示框对象
  createMeasureTooltip() //重新创建一个测试工具提示框显示结果
  ol.Observable.unByKey(listener)
}

//鼠标移动触发的函数
const pointerMoveHandler = function (evt) {
  //Indicates if the map is currently being dragged.
  //Only set for POINTERDRAG and POINTERMOVE events. Default is false.
  //如果是平移地图则直接结束
  if (evt.dragging) {
    return
  }
  //帮助提示信息
  helpMsg = 'Click to start drawing'

  if (sketch) {
    //Get the feature's default geometry.
    //A feature may have any number of named geometries.
    //获取绘图对象的几何要素
    var geom = sketch.getGeometry()
    //如果当前绘制的几何要素是多边形，则将绘制提示信息设置为多边形绘制提示信息
    //如果当前绘制的几何要素是多线段，则将绘制提示信息设置为多线段绘制提示信息
    if (geom instanceof ol.geom.Polygon) {
      helpMsg = continuePolygonMsg
    } else if (geom instanceof ol.geom.LineString) {
      helpMsg = continueLineMsg
    }
  }
  //设置帮助提示要素的内标签为帮助提示信息
  helpTooltipElement.innerHTML = helpMsg
  //设置帮助提示信息的位置
  //The coordinate in view projection corresponding to the original browser event.
  helpTooltip.setPosition(evt.coordinate)
  //移除帮助提示要素的隐藏样式
  $(helpTooltipElement).removeClass('hidden')
}

//创建帮助提示框
function createHelpTooltip() {
  //如果已经存在帮助提示框则移除
  if (helpTooltipElement) {
    helpTooltipElement.parentNode.removeChild(helpTooltipElement)
  }
  //创建帮助提示要素的div
  helpTooltipElement = document.createElement('div')
  //设置帮助提示要素的样式
  helpTooltipElement.className = 'help-tool tooltip hidden'
  //创建一个帮助提示的覆盖标注
  helpTooltip = new ol.Overlay({
    element: helpTooltipElement,
    offset: [15, 0],
    positioning: 'center-left',
  })
  //将帮助提示的覆盖标注添加到地图中
  map.addOverlay(helpTooltip)
}

/**
 *创建一个新的测量工具提示框（tooltip）
 */
function createMeasureTooltip() {
  if (measureTooltipElement) {
    measureTooltipElement.parentNode.removeChild(measureTooltipElement)
  }
  measureTooltipElement = document.createElement('div')
  measureTooltipElement.className = 'tooltip tooltip-measure'
  measureTooltip = new ol.Overlay({
    element: measureTooltipElement,
    offset: [0, -15],
    positioning: 'bottom-center',
  })
  map.addOverlay(measureTooltip)
}

/**
 * 测量长度输出
 * @param {ol.geom.LineString} line
 * @return {string}
 */
const formatLength = function (line) {
  const sphere = new ol.Sphere()
  let length = sphere.getLength(line, {
    projection: map.getView().getProjection(), //地图数据源投影坐标系
    radius: 6378137,
  })
  let output
  if (length > 100) {
    output = Math.round((length / 1000) * 100) / 100 + ' ' + 'km' //换算成KM单位
  } else {
    output = Math.round(length * 100) / 100 + ' ' + 'm' //m为单位
  }
  return output //返回线的长度
}
/**
 * 测量面积输出
 * @param {ol.geom.Polygon} polygon
 * @return {string}
 */
const formatArea = function (polygon) {
  const sphere = new ol.Sphere()
  let area = Math.abs(
    sphere.getArea(polygon, {
      projection: map.getView().getProjection(),
      radius: 6378137,
    })
  ) //获取面积
  let output
  if (area > 10000) {
    output = Math.round((area / 1000000) * 100) / 100 + ' ' + 'km<sup>2</sup>' //换算成KM单位
  } else {
    output = Math.round(area * 100) / 100 + ' ' + 'm<sup>2</sup>' //m为单位
  }
  return output //返回多边形的面积
}
